<template>
	<view class="integral-box">
		<view class="top-info">
			当前积分 <text class="num">{{total}}</text>
		</view>
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="name">
					{{item.detail}}<text class="num znum">+{{item.lastScore}}</text>
				</view>
				<view class="time">
					{{item.createTime}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getScoreQueryByUserId } from '@/api/user.js'
	export default {
		data() {
			return {
				list: [],
				total: 0
			};
		},
		onLoad() {
			this.getQueryByUserIdFn()
		},
		methods:{
			getQueryByUserIdFn(){
				getScoreQueryByUserId().then((res) =>{
					this.list = res
					res.forEach((r) => {
						this.total += r.lastScore
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.integral-box{
	.top-info{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		background-color: #fff;
		padding-top: 60rpx;
		padding-left: 30rpx;
		padding-bottom: 42rpx;
		display: flex;
		align-items: center;
		.num{
			font-size: 48rpx;
			color: #E4919D;
			margin-left: 12rpx;
		}
	}
	.list{
		margin: 32rpx;
		.item{
			height: 182rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,73,91,0.05);
			border-radius: 16rpx;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
		}
		.name{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin: 0 30rpx;
			padding-top: 40rpx;
			.num{
				font-size: 36rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #666666;
				float: right;
			}
			.znum{
				color: #E4919D;
			}
		}
		.time{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
			margin: 0 30rpx;
			margin-top: 45rpx;
		}
	}
}
</style>
